<template>
  <div class="list-wrap">
    <div class="list-item">
      <div class="list-header">
        <span class="header-index">index</span>
        <el-divider direction="vertical"></el-divider>
        <span class="header-item">item</span>
        <el-button size="small" @click="addListWrapStatus = true">+</el-button>
        <el-dialog
            title="新建&nbsp;List Position-Value"
            v-model="addListWrapStatus"
            width="40%">
          <el-form class="demo-form-inline" label-position="right" style="width: 90%;margin:0 auto;">
            <el-form-item label="Position" label-width="80px">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Value" label-width="80px">
              <el-input v-model="listValue"
                        type="textarea"
                        :autosize="{ minRows: 6, maxRows: 9}"
                        placeholder="string"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="addListWrapStatus = false">取 消</el-button>
              <el-button type="primary" @click="handleInsertKey">确 定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div class="item-list">
        <span class="item" :class="{active:active===n}" v-for="n in 50" @click="handleClickItem(n)">
          <span style="padding: 20px">
            <el-tag type="info" class="tag-wrap">{{ n }}</el-tag>
          </span>
          <span class="item-content">Item {{ n }}</span>
        </span>
      </div>
    </div>
    <div class="list-content">
      <editor :key="this.$store.state.editorRandKey" v-if="this.$store.state.redisData.content !== ''"></editor>
    </div>
  </div>
</template>

<script>

import editor from '@/views/content/editor/editor'

export default {
  name: "list_content",
  components: {
    editor
  },
  data() {
    return {
      active: 0,
      addListWrapStatus: false,
      value: '',
      options: [{label: 'Header', value: 1}, {label: 'Tail', value: 2}],
      listValue: ''
    }
  },
  methods: {
    handleInsertKey() {
    },
    handleClickItem(active) {
      this.active = active
      this.$nextTick(() => {
        this.$store.commit('changeEditorRandKey')
      })
      this.$store.state.redisData.content = JSON.stringify({'listitem': 'item-' + active})
    }
  }
}
</script>

<style scoped lang="less">
@activeColor: rgba(66, 185, 131, 0.45);
.list-wrap {
  width: 100%;
  height: 100%;
  text-align: left;

  .list-item {
    float: left;
    max-width: 20%;
    min-width: 300px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
    position: relative;

    .list-header {
      height: 5%;
      position: static;
      display: flex;
      align-items: center;
      vertical-align: middle;
      padding: 5px 15px;

      .header-index {
        padding: 10px;
      }

      .header-item {
        padding: 10px;
        flex: 1;
      }
    }

    .item-list {
      height: 93%;
      overflow: scroll;

      .item {
        display: block;
        height: 30px;
        padding: 5px;
        border: 1px solid #f5f5f5;

        &.active {
          background: @activeColor;
        }

        .tag-wrap {
          width: 40px;
          text-align: center;
        }

        .item-content {
          padding-left: 10px;
        }
      }
    }

  }

  .list-content {
    float: left;
    max-width: 79%;
    width: calc(100% - 301px);
    height: 100%;
  }
}
</style>